<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >
    <title>主页面</title>
    <link
        rel="stylesheet"
        href="../static/css/index.css"
    >
    <style>

    </style>

</head>

<body>
    <!-- 导航栏 -->
    <div>
        <div class="navbar">
            <!-- logo图片 -->
            <img
                src="../static/image/logo.png"
                alt="logo"
                class="logo_img"
            >
            <div><a href="{{ url_for('index') }}">首页</a></div>
            <div><a href="{{ url_for('add_student') }}">添加学生信息</a></div>
            <div><a href="{{ url_for('delete_student') }}">删除学生信息</a></div>
            <div><a href="{{ url_for('select_stu_score') }}">查询学生信息</a></div>
            <div><a href="{{ url_for('about_us') }}">关于我们</a></div>
            <div><a href="{{ url_for('help') }}">帮助中心</a></div>
            <div class="dao_hang">
                <a href="{{ url_for('login') }}">登录</a>
                <a href="{{ url_for('register') }}">注册</a>
            </div>
        </div>
    </div>
    <!-- 做一个轮播图 -->
    <div class="carousel">
        <!-- 轮播图图片 -->
        <img
            src="../static/image/lunbo_10001.jpg"
            alt="图片1"
            class="active"
        >
        <img
            src="../static/image/lunbo_10002.jpg"
            alt="图片2"
        >
        <img
            src="../static/image/lunbo_10003.jpg"
            alt="图片3"
        >
        <!-- 左右箭头 -->
        <span class="arrow arrow-left">&lt;</span>
        <span class="arrow arrow-right">&gt;</span>
    </div>

    <script>
        // 获取轮播图容器和图片元素
        const carousel = document.querySelector('.carousel');
        const images = carousel.querySelectorAll('img');
        let currentIndex = 0; // 当前显示的图片索引

        // 切换到下一张图片
        function nextImage() {
            images[currentIndex].classList.remove('active'); // 移除当前图片的激活状态
            currentIndex = (currentIndex + 1) % images.length; // 计算下一张图片的索引
            images[currentIndex].classList.add('active'); // 为下一张图片添加激活状态
        }

        // 切换到上一张图片
        function prevImage() {
            images[currentIndex].classList.remove('active'); // 移除当前图片的激活状态
            currentIndex = (currentIndex - 1 + images.length) % images.length; // 计算上一张图片的索引
            images[currentIndex].classList.add('active'); // 为上一张图片添加激活状态
        }

        // 绑定左右箭头点击事件
        document.querySelector('.arrow-left').addEventListener('click', prevImage);
        document.querySelector('.arrow-right').addEventListener('click', nextImage);

        // 每隔3秒切换到下一张图片
        setInterval(nextImage, 3000);
    </script>


    <div class="container">
        <div class="main">
            <div class="section-title">
                <span class="icon">📄</span> 学院新闻
            </div>
            <div class="news-item">
                <h3><a href="链接地址1">喜报！青岛农业大学海都学院在2024年山东省高校心理健康教育月展示活动中荣获佳绩</a></h3>
                <p><a href="链接地址1">近日，山东省高校思想政治教育研究会、大学生心理健康教育专业委员会公布了2024年...</a></p>
            </div>
            <div class="news-item">
                <h3><a href="链接地址1">喜报！青岛农业大学海都学院在2024年山东省高校心理健康教育月展示活动中荣获佳绩</a></h3>
                <p><a href="链接地址1">近日，山东省高校思想政治教育研究会、大学生心理健康教育专业委员会公布了2024年...</a></p>
            </div>
            <div class="news-item">
                <h3><a href="链接地址2">我校与青岛中科基因生物技术有限公司举行校企合作揭牌仪式</a></h3>
                <p><a href="链接地址2">为进一步深化产教融合，提升学校教育教学水平，优化人才培养模式，9月30日，青...</a></p>
            </div>
            <!-- 继续添加新闻项 -->
        </div>
        <div class="sidebar">
            <div class="section-title">
                媒体聚焦
            </div>
            <div class="media-item">
                <span class="date">09<br>2024.10</span>
                <a href="链接地址3">山东教育电视台：今天会是什么风</a>
            </div>
            <div class="media-item">
                <span class="date">09<br>2024.10</span>
                <a href="链接地址4">山东教育电视台：祝福祖国，生日快乐！</a>
            </div>
            <div class="media-item">
                <span class="date">09<br>2024.10</span>
                <a href="链接地址4">山东教育电视台：祝福祖国，生日快乐！</a>
            </div>
            <div class="media-item">
                <span class="date">09<br>2024.10</span>
                <a href="链接地址4">山东教育电视台：祝福祖国，生日快乐！</a>
            </div>
            <!-- 继续添加媒体项 -->
        </div>
    </div>


</body>

</html>